* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #222;
}

h1 {
    position: relative;
    /* 文字大写 */
    text-transform: uppercase;
    color: #333;
    font-size: 8rem;
}

h1::after {
    content: 'spotlight';
    position: absolute;
    left: 0;
    top: 0;
    color: transparent;
    background-image: linear-gradient(to right, #c23616, #192a56,
    #00d2d3, yellow, #6d214f, #2e86de, #4cd137, #e84118);
    /* 背景绘制区域，当值为 text 时代表设置文字的镂空效果，前提是文字颜色为透明色 */
    background-clip: text;
    /* 谷歌浏览器的私有属性 */
    -webkit-background-clip: text;
    /*
    利用裁剪来创建元素可显示的区域
    circle表示创建了原形
    100px 表示圆形的直径
    0% 和 50% 表示圆形的圆心
    圆形的直径和圆心利用 at 关键字隔开
    */
    clip-path: circle(100px at 0% 50%);
    animation: move 5s infinite;
}

/* 下面设置圆形的移动效果 */
@keyframes move {
    0% {
        /* 0% 圆形在文字最左边 */
        clip-path: circle(100px at 0% 50%);
    }
    50% {
        /* 100% 圆形在文字最右边 */
        clip-path: circle(100px at 100% 50%);
    }
    100% {
        clip-path: circle(100px at 0% 50%);
    }
}
